<script setup lang="ts">
import { Drawer, Segmented } from 'ant-design-vue';

import Appearance from '@/fierce/components/app-settings/appearance.vue';
import Layout from '@/fierce/components/app-settings/layout.vue';
import Common from '@/fierce/components/app-settings/common.vue';

defineOptions({
  name: 'AppSetting',
});

const open = ref(false);

function handleOpen() {
  open.value = true;
}

function handleClose() {
  open.value = false;
}

defineExpose({
  handleClose,
  handleOpen,
});

const segmentedOptions = [
  {
    label: '外观',
    value: 'Appearance',
  },
  {
    label: '布局',
    value: 'Layout',
  },
  {
    label: '通用',
    value: 'Common',
  },
];
const segmentedValue = ref('Appearance');
</script>

<template>
  <Drawer
    v-model:open="open"
    title="偏好设置"
    placement="right"
    :closable="false"
  >
    <Segmented v-model:value="segmentedValue" :options="segmentedOptions" block />

    <Appearance v-if="segmentedValue === 'Appearance'" />
    <Layout v-if="segmentedValue === 'Layout'" />
    <Common v-if="segmentedValue === 'Common'" />
  </Drawer>
</template>

<style scoped lang="less">

</style>
